﻿<div id="tableQueryBuilder" class="reveal-modal large" data-bind="modalSuccess: addOnSuccess, enterPressed: apply">
    <h2>Query Builder</h2>
    <div class="query-text">
        <div data-bind="if: !!expression()">
            <p data-bind="html: queryHtmlString"></p>
        </div>
    </div>
    <div class="query-tree" data-bind="if: !!expression(), event: { mouseout: unhighlightAll }">
        <!-- ko template: { name: 'query-expression', data: expression }-->
        <!-- /ko -->
    </div>
    <div class="query-tree">
        <div class="large-6 columns">
        </div>
        <div class="large-6 columns">
            <input type="button" class="button right" value="Apply" data-bind="click: apply" />
        </div>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/html" id="query-expression">
    <!-- ko if:type == 'compare' -->
    <!-- ko template: { name: 'query-compare' }-->
    <!-- /ko -->
    <!-- /ko -->
    <!-- ko if:type == 'combine' -->
    <!-- ko template: { name: 'query-combine' }-->
    <!-- /ko -->
    <!-- /ko -->
    <!-- ko if:type == 'func' -->
    <!-- ko template: { name: 'query-func' }-->
    <!-- /ko -->
    <!-- /ko -->
</script>
<script type="text/html" id="query-compare">
    <div class="row collapse" data-bind="event: { mouseover: highlight }">
        <div class="large-2 columns">
            <input type="text" data-bind="value: left" />
        </div>
        <div class="large-2 columns">
            <select data-bind="value: operator">
                <option value="ge">Greater or equal</option>
                <option value="gt">Greater</option>
                <option value="eq">Equals</option>
                <option value="ne">Not equals</option>
                <option value="le">Less or equal</option>
                <option value="lt">Less</option>
            </select>
        </div>
        <div class="large-4 columns">
            <div class="collapse row">
                <div class="large-8 columns">
                    <input type="text" data-bind="value: right" />
                </div>
                <div class="large-4 columns">
                    @Html.Partial("Tables/EdmType")
                </div>
            </div>
        </div>
        <div class="large-4 columns">
            &nbsp;
            <button class="small secondary button" title="Invert expression" data-bind="click: invert">
                <span aria-hidden="true" class="icon-invert">!</span>
            </button>
            <button class="small secondary button" data-bind="click: addExpression, visible: canAdd">
                <span aria-hidden="true" class="icon-plus"></span>
            </button>
            <button class="small secondary button" data-bind="click: $parent.removeExpr, visible: $parent.canRemove">
                <span aria-hidden="true" class="icon-delete"></span>
            </button>
        </div>
    </div>
</script>
<script type="text/html" id="query-combine">
    <div class="row" data-bind="event: { mouseover: highlight }">
        <div class="large-3 columns">
            <select data-bind="value: operator">
                <option value="and">All</option>
                <option value="or">Any</option>
            </select>
        </div>
        <div class="large-9 columns">
            <button class="small secondary button" title="Invert expression" data-bind="click: invert">
                <span aria-hidden="true" class="icon-invert">!</span>
            </button>
            <button class="small secondary button" data-bind="click: addExpression, visible: canAdd">
                <span aria-hidden="true" class="icon-plus"></span>
            </button>
            <button class="small secondary button" data-bind="click: $parent.removeExpr, visible: $parent.canRemove">
                <span aria-hidden="true" class="icon-delete"></span>
            </button>
        </div>
    </div>
    <div class="row subexpressions">
        <div class="large-12 columns">
            <!-- ko foreach: subexpressions -->
            <!-- ko template: { name: 'query-expression' }-->
            <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</script>
<script type="text/html" id="query-func">
    <div class="row" data-bind="event: { mouseover: highlight }">
        <div class="large-3 columns">
            <select data-bind="value: funcName">
                <option value="not">Not</option>
            </select>
        </div>
        <div class="large-9 columns">
            <button class="small secondary button" title="Invert expression" data-bind="click: invert">
                <span aria-hidden="true" class="icon-invert">!</span>
            </button>
            <button class="small secondary button" data-bind="click: addExpression, visible: canAdd">
                <span aria-hidden="true" class="icon-plus"></span>
            </button>
            <button class="small secondary button" data-bind="click: $parent.removeExpr, visible: $parent.canRemove">
                <span aria-hidden="true" class="icon-delete"></span>
            </button>
        </div>
        <div class="large-8 columns"></div>
    </div>
    <div class="row subexpressions">
        <div class="large-12 columns">
            <!-- ko with: arg -->
            <!-- ko template: { name: 'query-expression' }-->
            <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</script>
